<template>
    <div>
      <el-button @click="dialogVisible = true" type="primary">申请员工社保账号</el-button>
      <el-button @click="dialogVisible3 = true" type="primary">公司账号充值</el-button>
      <el-button @click="seeMoney()" type="primary">公司账号余额查看</el-button>
      <!-- 表单 -->
        <el-table :data="personList" style="width: 100%;">
          <el-table-column fixed prop="name" label="姓名" width="150" />
              <el-table-column prop="age" label="年龄" width="150" />
              <el-table-column prop="idNumber" label="身份证号码" width="240" />
              <el-table-column prop="employer" label="雇主" width="150" />
              <el-table-column prop="paymentBase" label="缴费基数" width="150" />
              <el-table-column prop="personalBalance" label="账户余额" width="150" />
              <el-table-column prop="salary" label="薪水" width="150" />
              <el-table-column fixed="right" label="操作" width="100">
                <template #default="scope">
                  <el-button
                    link
                    type="primary"
                    size="small"
                    @click.prevent="seePassword(scope)"
                  >
                    查看密码
                  </el-button>
                </template>
              </el-table-column>
              <el-table-column fixed="right" label="操作" width="150">
                <template #default="scope">
                  <el-button link type="primary" size="small" @click="dialogVisible4Info(scope)">账户充值</el-button>
              <!-- <el-button link type="primary" size="small">Edit</el-button> -->
               </template>
              </el-table-column>
        </el-table>
        <!--申请员工社保账号  -->
        <el-dialog style="width: 700px;" title="员工信息" v-model="dialogVisible">
              <el-form label-width="150px" ref="personDetail.value" style="margin: 0 auto">
                <el-form-item label-width="40%" label="员工姓名:">
                  <el-input style="width: 300px" v-model="personDetail.name"></el-input>
                </el-form-item>
                <el-form-item label-width="40%" label="员工年龄:">
                  <el-input style="width: 300px" v-model="personDetail.age"></el-input>
                </el-form-item>
                <el-form-item label-width="40%" label="性别:">
                  <el-radio-group v-model="personDetail.sex">
                    <el-radio label="男" value="1"></el-radio>
                    <el-radio label="女" value="2"></el-radio>
                  </el-radio-group>
                </el-form-item>
                <el-form-item label-width="40%" label="身份证号码:">
                  <el-input style="width: 300px" v-model="personDetail.idNumber"></el-input>
                </el-form-item>
                <el-form-item label-width="40%" label="工资:">
                  <el-input style="width: 300px" v-model.number="personDetail.salary"></el-input>
                </el-form-item>
                <el-form-item label-width="40%" label="缴费起始日期:">
                  <el-date-picker v-model="personDetail.startDate" type="date" :size="size" placeholder="选择日期"/>
                </el-form-item>

                <el-form-item label-width="40%" >
                  <el-button type="primary" @click="onSubmit()">立即创建</el-button>
                  <el-button style="margin-left: 150px;" @click="closeDialog">取消</el-button>
                </el-form-item>
              </el-form>
          </el-dialog>
          <!-- 公司账户充值弹窗 -->
          <el-dialog style="width: 700px;" title="公司信息" v-model="dialogVisible3">
              <el-form label-width="150px" ref="companyDetail.value" style="margin: 0 auto">
                <!-- <el-form-item label-width="40%" label="公司地址:">
                  <el-input style="width: 300px" v-model="companyDetail.address"></el-input>
                </el-form-item> -->
                <el-form-item label-width="40%" label="充值金额:">
                  <el-input style="width: 300px" v-model.number="companyDetail.amount"></el-input>
                </el-form-item>
                <el-form-item label-width="40%" >
                  <el-button type="primary" @click="SubmitDeposit()">提交</el-button>
                  <el-button style="margin-left: 150px;" @click="closeDialog">取消</el-button>
                </el-form-item>
              </el-form>
          
            </el-dialog>
          <!-- 个人账户充值弹窗 -->
          <el-dialog style="width: 700px;" title="购买保险" v-model="dialogVisible4">
              <el-form label-width="150px" ref="personDetail.value" style="margin: 0 auto">
                <el-form-item label-width="40%" label="员工地址:">
                  <el-input style="width: 300px" v-model="personDetail.address"></el-input>
                </el-form-item>
                <!-- <el-form-item label-width="40%" label="充值金额:">
                  <el-input style="width: 300px" v-model.number="personDetail.amount"></el-input>
                </el-form-item> -->
                <el-form-item label-width="40%" >
                  <el-button type="primary" @click="SubmitDepositEmployee()">提交</el-button>
                  <el-button style="margin-left: 150px;" @click="closeDialog">取消</el-button>
                </el-form-item>
              </el-form>
          
            </el-dialog>
              <!-- 看密码的弹窗 -->
          <el-dialog
            v-model="dialogVisible2"
            title="账号密码信息"
            width="500"
            :before-close="handleClose"
          >
          <div>账号是：{{ employeeAddress }}</div>
          <div>密码是：{{ security }}</div>
            <template #footer>
              <div class="dialog-footer">
                <el-button type="primary" @click="dialogVisible2 = false">
                  已记住
                </el-button>
              </div>
            </template>
          </el-dialog>
    </div>
</template>

<!-- 申请账户成功 tip -->
<script setup>
import myAxios from "../../plugins/myAxios.js"
import { onMounted } from 'vue';
import { ref } from 'vue';
import { ElNotification } from 'element-plus'
import { ElMessage, ElMessageBox } from 'element-plus'

// 弹窗控制
const dialogVisible = ref(false);
const dialogVisible2 = ref(false);
const dialogVisible3 = ref(false);
const dialogVisible4 = ref(false);
//账号密码
const employeeAddress = ref('');
const security = ref('');
// 当前公司地址
const currentSponsorAddress = localStorage.getItem('senderAddress');
// 当前员工地址
const currentEmployeeAddress = ref('');
// 公司余额
const sponsorMoney = ref('')

const personDetail = ref({
        name: "",
        age: null,
        sex: "",
        user_type: "",
        address: "",
        idNumber: "",
        personCompany: "",
        startDate: "",
        salary: null,
        paymentBase: null,
})

const companyDetail = ref({
        address: localStorage.getItem('senderAddress'),
        name: "",
        overallBalance: null,
        amount: ''
})



const handleClick = () => {
  console.log('click')
}

const personList = ref([])

// 给公司充值接口
const SubmitDeposit = () => {
  let postData = {
    senderAddress: localStorage.getItem('senderAddress'),
    sponsorAddress: localStorage.getItem('senderAddress'),
    amount: companyDetail.value.amount
  }
  myAxios.post('/sponsor/depositSponsor', postData)
  .then((res) => {
    if(res.data.code === 200){
      ElNotification({
          title: '成功',
          message: '充值成功',
          type: 'success',
        })
      query()
      closeDialog()
    }else{
      ElNotification({
          title: '失败',
          message: `充值失败,${response.data.msg}`,
          type: 'error',
        })
    }
  })
}
// 给员工充值接口
const SubmitDepositEmployee = async () =>{
  let postData = {
    salary: personDetail.value.salary,
    address: personDetail.value.address,
    senderAddress: localStorage.getItem('senderAddress'),
    sponsorAddress: localStorage.getItem('senderAddress'),
    sponsorName: personDetail.value.personCompany
  }
  try {
    await myAxios.post('/user/makePayment',postData)
        .then((res) => {
          if(res.data.code === 200) {
            ElNotification({
              title: '成功',
              message: '充值成功',
              type: 'success',
            })
            closeDialog()
            query()
          }else {
            ElNotification({
              title: '失败',
              message: `充值失败,${response.data.msg}`,
              type: 'error',
            })
          }
        })
  } catch (error) {
    ElNotification({
      title: '失败',
      message: `充值失败,${error}`,
      type: 'error',
    })
  }

}
// 给员工充值接口 回显
const dialogVisible4Info = (row) => {
  console.log(row.row.employeeAddress)
  dialogVisible4.value = true
  personDetail.value.address = row.row.employeeAddress
  personDetail.value.salary = row.row.salary
  personDetail.value.personCompany = localStorage.getItem('sponsorName')
  console.log(currentEmployeeAddress.value)
}

// 看看雇主money
const seeMoney = async() => {
  await myAxios.post('/sponsor/getsponsorDetails',{sponsorAddress: localStorage.getItem('senderAddress')})
  .then((res) => {
    if (res.data.code === 200){
      console.log(res.data.data.overallBalance)
      sponsorMoney.value = res.data.data.overallBalance
      ElNotification({
          title: '成功',
          message: '查询成功',
          type: 'success',
        })
    }else{
      ElNotification({
          title: '失败',
          message: `查询失败,${response.data.msg}`,
          type: 'error',
        })
    }
  })
  ElMessageBox.alert(`公司余额是:${sponsorMoney.value}`, '公司余额', {
    // if you want to disable its autofocus
    // autofocus: false,
    confirmButtonText: 'OK',
  })
}
//看看密码 
const seePassword = (row) => {
  console.log(row.row.name)
  dialogVisible2.value = true
  employeeAddress.value = row.row.employeeAddress
  security.value = row.row.security
 // 完成赋值

}


// 提交新增员工 
const onSubmit =  async () => {
  let postData = {
    senderAddress : localStorage.getItem('senderAddress'),
    name: personDetail.value.name,
    age: personDetail.value.age,
    sex: personDetail.value.sex,
    employeeAddress: personDetail.value.address,
    idNumber: personDetail.value.idNumber,
    employer: localStorage.getItem('sponsorName'),
    salary: personDetail.value.salary,
    startDate: new Date(personDetail.value.startDate).getTime()
  }
  console.log('公司地址：',postData.senderAddress)
  if(postData.senderAddress){
     await myAxios.post("/user/addPerson", postData)
    .then((res) => {
        console.log(res);
        if (res.data.code === 200){
            console.log(res.data.data)
            const jsonData =  JSON.parse(res.data.data)
          myAxios.post('/user/addEmployee',{address: jsonData.employeeAddress, salary: postData.salary, senderAddress: postData.senderAddress, sponsorAddress: postData.senderAddress})
            .then((res2) => {
              console.log(res2);
              closeDialog()
              query()
              if(res2.data.code === 200){
                ElNotification({
                  title: '添加成功',
                  message: ('i', { style: 'color: teal' }, '成功添加员工'),
                })
              }else {
                    ElNotification({
                      title: '失败',
                      message: `添加失败,${res2.data.msg}`,
                      type: 'error',
                    })
              }
            })
        }else{
        ElNotification({
          title: '失败',
          message: `注册失败,${res.data.msg}`,
          type: 'error',
        })
      }
    })
  }
}

const query = async () => {
  console.log(localStorage.getItem('senderAddress'))
  try {
    await myAxios.post("/sponsor/SponsorCompanys", {userAddress: localStorage.getItem('senderAddress')})
        .then((res) => {
          if (res.data.code === 200) {
            personList.value = res.data.data;

            // cookies.set('companyList', JSON.stringify(companyList.value))
          } else {
            alert(`请求失败：${res.data.msg}`);
          }
        })
  } catch (error) {
    ElNotification({
      title: '失败',
      message: `请求失败,${error}`,
      type: 'error',
    })
  }
}

onMounted(() => {
  query()
})

// 关闭输入框 清空数据
const closeDialog = () => {
  personDetail.value.applicant = ""
  personDetail.value.currentBureauAddress = null
  personDetail.value.fromCity = ""
  personDetail.value.toCity = ""
  personDetail.value.isStopped = null
  personDetail.value.isApproved = null
  personDetail.value.toBureauAddress = ""
  companyDetail.value.address = '',
  companyDetail.value.name = "",
  companyDetail.value.overallBalance = null,
  companyDetail.value.amount =  ''
  dialogVisible.value = false
  dialogVisible2.value = false
  dialogVisible3.value = false
  dialogVisible4.value = false
}
// 看密码关闭
const handleClose = () => {
    dialogVisible2.value = false 
}
</script>
